<template>
  <el-dialog :close-on-click-modal="false"   title="详情" :visible="show" :before-close="close">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="设备编码">{{ form.deviceCode }}</el-descriptions-item>
      <el-descriptions-item label="预警类型">{{ form.ruleName }}</el-descriptions-item>
      <el-descriptions-item label="设备地址">{{ form.deviceName }}</el-descriptions-item>
      <el-descriptions-item label="告警内容">{{ form.content }}</el-descriptions-item>
      <el-descriptions-item label="图片">
        <el-image v-for="(img,index) in getImgUrl(form.image)" :key="index" :src="`${img}?w=200&h=200&q=7`" :preview-src-list="getImgUrl(form.image)" style="width:100px;height:100px;border-radius:10px;margin-right:10px;"></el-image>
      </el-descriptions-item>
      <el-descriptions-item label="坐标">{{ form.location }}</el-descriptions-item>
      <el-descriptions-item label="上报时间">{{ form.gmtCreate }}</el-descriptions-item>
      <el-descriptions-item label="最近上报时间">{{ form.gmtLast }}</el-descriptions-item>
      <el-descriptions-item label="恢复时间">{{ form.gmtRecover }}</el-descriptions-item>
      <el-descriptions-item label="持续次数">{{ form.inc }}</el-descriptions-item>
      <el-descriptions-item label="状态">{{ form.status == 1 ? '告警中' : form.status == -1 ? '已忽略' : form.status == 0 ? '已恢复' : '其他' }}</el-descriptions-item>
      <el-descriptions-item label="是否已转事件">
        {{ form.eventId ? '是':'否' }}
        <el-button v-if="form.eventId" @click="showEventDtl" size="mini">查看</el-button>
      </el-descriptions-item>
    </el-descriptions>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    /* 显示隐藏 */
    show: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: {}
    }
  },
  watch: {
    show: {
      handler(val) {
        if (val) {
          this.resetForm('form');
        }
      },
      immediate: true
    },
    item: {
      handler(val) {
        this.form = val || {};
      },
      immediate: true
    }
  },
  data() {
    return {
      form: {}
    };
  },
  methods: {
    close() {
      this.form = {};
      this.$emit('update:show', false);
    },
    showEventDtl() {
      this.$emit("showEvent", this.item)
    },
  }
};
</script>

<style lang="scss" scoped></style>
